<template>
  <div class="manage">
    <el-dialog
        title="新增岗位"
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="30%"
        style="text-align: center"
        :before-close="handleClose"
    >
      <!--用户的表单信息-->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px" label-position="right">
        <el-form-item label="岗位名称" prop="postName">
          <el-input placeholder="请输入岗位名称" v-model="form.postName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="编辑岗位"
        :visible.sync="dialogEditVisible"
        v-if="dialogEditVisible"
        width="30%"
        style="text-align: center"
        :before-close="handleEditClose"
    >
      <el-form ref="formEdit" :rules="rulesEdit" :inline="true" :model="formEdit" label-width="80px" label-position="right">
        <el-form-item label="岗位编号" prop="postId" required>
          <el-input v-model="formEdit.postId" disabled></el-input>
        </el-form-item>
        <el-form-item label="岗位名称" prop="postName">
          <el-input placeholder="请输入岗位名称" v-model="formEdit.postName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancelEdit">取 消</el-button>
              <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button @click="handleAdd" type="primary" size="mini">
        + 新增
      </el-button>
      <!--          form搜索区域-->
      <!--      <el-form :inline="true" :model="userForm" size="mini">-->
      <!--        <el-form-item label="状态：" prop="status">-->
      <!--          <el-select v-model="userForm.status" placeholder="请选择状态">-->
      <!--            <el-option label="有效" value="1"></el-option>-->
      <!--            <el-option label="无效" value="0"></el-option>-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="名称：" prop="postname" >-->
      <!--          <el-input placeholder="请输入岗位名称" v-model="userForm.postname"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="负责人：" prop="posthearder">-->
      <!--          <el-input placeholder="请输入负责人姓名" v-model="userForm.posthearder"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="安全员：" prop="safeer">-->
      <!--          <el-input placeholder="请输入安全员姓名" v-model="userForm.safeer"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item>-->
      <!--          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData.slice((paginations.current-1)*paginations.pageSize,paginations.current*paginations.pageSize)"
          style="width: 100%">
        <el-table-column
            prop="postId"
            fixed
            label="编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="postName"
            label="岗位名称"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.postName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="status"-->
        <!--            label="岗位状态"-->
        <!--            align="center"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <span :style="{ color: scope.row.status ===true ? 'green' :'red'}"-->
        <!--            >-->
        <!--              {{scope.row.status===true?'有效':'无效'}}-->
        <!--            </span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="200px"
        >
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       style="background-color: blue"
                       @click="edit(scope.row)"
            >
              编辑
            </el-button>
            <el-button type="info"
                       size="mini"
                       icon="el-icon-s-tools"
                       :style="{background:  'red'}"
                       @click="handleStop(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {postAdd, postEdit, postSelect, postList, postDelete} from '@/api/post'

export default {
  name: 'BusinessManagement',
  data () {
    return {
      dialogVisible: false,
      dialogEditVisible:false,
      form: {
        postName: '',
      },
      formEdit:{
        postId:'',
        postName: ''
      },
      rules: {
        postName: [
          {
            required: true,
            message: '请输入岗位名称',
            trigger:'blur'
          }
        ]
      },
      rulesEdit:{
        postId:[
          {
            required: true,
            message: '请输入岗位编号',
            trigger:'blur'
          }
        ],
        postName: [
          {
            required: true,
            message: '请输入岗位名称',
            trigger:'blur'
          }
        ]
      },
      tableData: [],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      }
    }
  },
  mounted() {
    this.created();
  },
  methods: {
    created() {
      this.getList(this.paginations.current,this.paginations.pageSize)
    },
    //提交用户表单
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          postAdd(this.form).then((res)=>{
            //新增用户的接口
            if(res.code===200){
              console.log('新增成功')
              this.$message.success({
                message:'新增成功',
                type:'success'
              })
            }else{
              console.log(res.msg)
              this.$message.error(res.msg)
            }
            this.dialogVisible = false
            console.log(this.form, 'form')
            //清空表单数据
            this.$refs.form.resetFields()
            //重新获取列表的接口
            this.getList(this.paginations.current,this.paginations.pageSize)
          })

        }
      })
    },
    //弹窗关闭的时候
    handleClose () {
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.form.postName = ''
    },
    cancel () {
      this.handleClose()
    },
    handleEditClose(){
      this.dialogEditVisible = false
      this.$refs.formEdit.resetFields()
      this.formEdit.postId = ''
      this.formEdit.postName = ''
    },
    cancelEdit(){
      this.handleEditClose()
    },
    edit(row){
      this.dialogEditVisible = true
      this.formEdit.postId = row.postId
      this.formEdit.postName = row.postName
    },
    handleStop(row){
      this.formEdit.postId = row.postId
      let params={
        postId:this.formEdit.postId
      }
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText:'取消',
        type:"warning"
      }).then(() =>{
        postDelete(params).then((res)=>{
          if(res.code===200){
            this.$message.success({
              message:res.msg,
              type:'success'
            })
            this.getList(this.paginations.current,this.paginations.pageSize)
          }
        })
      }).catch(() => {

      })
    },
    submitEdit(){
      this.$refs.formEdit.validate((valid)=>{
        if(valid){
          postEdit(this.formEdit).then(res=>{
            if(res.code === 200){
              this.$message.success(res.msg)
              this.dialogEditVisible = false
              this.$refs.formEdit.resetFields()
              this.getList(this.paginations.current,this.paginations.pageSize)
            }
          })
        }
      })
    },
    //分页方法
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList(val,this.paginations.pageSize);
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList(this.paginations.current ,val);
    },
    //获取的列表数据
    getList (current,pageSize) {
      postList().then(resp => {
        if (resp.code === 200) {
          console.log(resp.data)
          this.tableData = resp.data
          this.paginations.total = resp.data.length
          this.paginations.current = current
          this.paginations.pageSize = pageSize
        }else{
          this.$message.error(resp.msg)
        }
      })
    },
    handleAdd () {
      this.dialogVisible = true
      // this.$refs.form.resetFields()
      this.form.postName = ''
    },
    //列表的查询
    onSubmit () {
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .manage-header{
    //display: flex;
    //justify-content: space-between;
    //align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
    padding-bottom: 1em;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
</style>
